<template>
  <dtDialog
    :title="modalTitle"
    :visible.sync="dialogVisible"
    :lock-scroll="false"
    :append-to-body="true"
    :is-loading="loading"
    :footerSlot="disabledForm"
    @closeDialog="onModalClosed"
    @comfirmBtn="onSubmit()"
  >
    <el-form
      ref="form"
      slot="content"
      label-width="140px"
      :model="form"
      :rules="rules"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="视频名称" prop="videoName">
            <el-input v-model.trim="form.videoName" :disabled="disabledForm" placeholder="请输入视频名称"
                      maxlength="20" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="菜单" prop="menuId">
            <el-select v-model="form.menuId" placeholder="请选择菜单" style="width: 100%"
                       :disabled="disabledForm">
              <el-option v-for="type in typeList" :key="type.id" :label="type.menuName"
                         :value="type.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="课堂类型" prop="isAutomatic">
            <el-radio-group v-model="form.isAutomatic">
              <el-radio label="1" :disabled="disabledForm">视频</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="学段" prop="period">
            <el-select v-model="form.period" placeholder="请选择学段" style="width: 100%"
                       :disabled="disabledForm" @change="handleChangePeriod">
              <el-option v-for="dict in dict.type.period" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="年级" prop="grade">
            <el-select v-model="form.grade" placeholder="请选择年级" style="width: 100%"
                       :disabled="disabledForm">
              <el-option v-for="dict in gradeList" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="学科" prop="subject">
            <el-select v-model="form.subject" placeholder="请选择学科" style="width: 100%"
                       :disabled="disabledForm">
              <el-option v-for="dict in dict.type.subject" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="版本" prop="version">
            <el-select v-model="form.version" placeholder="请选择版本" style="width: 100%"
                       :disabled="disabledForm">
              <el-option v-for="dict in dict.type.version" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="册次" prop="volume">
            <el-select v-model="form.volume" placeholder="请选择册次" style="width: 100%"
                       :disabled="disabledForm">
              <el-option v-for="dict in dict.type.volume" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传文件" prop="fileList">
            <DtFileUpload
              ref="fileUploadRef"
              v-model="form.fileList"
              :file-type="fileType"
              :fileLimit="1"
              :fileSize="200"
              :disabled="disabledForm"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传封面" prop="coverFileList">
            <dt-upload v-model="form.coverFileList" :fileSize="1" :list-type="'picture-card'"
                       :isShowTip="false" :disabled="disabledForm" />
            <div class="el-upload__tip" style="line-height: 1.4">
              首页banner封面建议尺寸: <span class="red-size">480*123</span>，非置顶建议尺寸：<span class="red-size">280*150</span>，只能上传 <b>png/jpg/jpeg</b> 文件，且不超过 <b>1MB</b>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="视频概述" prop="videoSummary">
            <el-input
              type="textarea"
              placeholder="请输入视频概述"
              maxlength="200"
              show-word-limit
              v-model="form.videoSummary"
              :disabled="disabledForm">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="参考组织" prop="organization">
            <el-input
              placeholder="请输入参考组织"
              maxlength="30"
              show-word-limit
              v-model="form.organization"
              :disabled="disabledForm">
            </el-input>
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>
  </dtDialog>
</template>

<script>
import { add, getDetail, edit } from '@/api/classroom/learnVideoManage'
import { cloud } from '@/framework/utils/request'

export default {
  dicts: ['period', 'grade', 'subject', 'version', 'volume'],
  props: {
    typeList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      form: {
        videoName: '',
        isAutomatic: '1',
        fileList: [],
        coverFileList: [],
        videoSummary: '',
        period: '',
        grade: '',
        subject: '',
        version: '',
        volume: '',
        menuId: ''
      },
      rules: {
        videoName: [{ required: true, message: '请输入视频名称', trigger: ['blur'] }],
        isAutomatic: [{ required: true, message: '请选择课堂类型', trigger: ['change'] }],
        fileList: [{ required: true, message: '请上传文件', trigger: ['change'] }],
        coverFileList: [{ required: true, message: '请上传封面', trigger: ['change'] }],
        videoSummary: [{ required: true, message: '请输入视频概述', trigger: ['blur'] }],
        period: [{ required: true, message: '请选择学段', trigger: ['change'] }],
        grade: [{ required: true, message: '请选择年级', trigger: ['change'] }],
        subject: [{ required: true, message: '请选择学科', trigger: ['change'] }],
        version: [{ required: true, message: '请选择版本', trigger: ['change'] }],
        volume: [{ required: true, message: '请选择册次', trigger: ['change'] }],
        menuId: [{ required: true, message: '请选择菜单', trigger: ['change'] }]
      },
      modalTitle: '',
      loading: false,
      dialogVisible: false,
      action: '',
      fileType: ['rmvb', 'mp4', 'avi', 'mpeg', 'wmv', 'rm']
    }
  },
  computed: {
    disabledForm() {
      return this.action == 'view'
    },
    gradeList() {
      if (this.form.period == '1') {
        return this.dict.type.grade
      }
      return this.dict.type.grade.slice(0, 3)
    }
  },
  methods: {
    handleChangePeriod(val) {
      if (+val > 1 && this.form.grade && +this.form.grade > 3) {
        this.form.grade = ''
      }
    },
    onModalClosed() {
      this.initModel()
    },
    onSubmit() {
      this.$refs.form.validate((result, message) => {
        if (result) {
          this.loading = true
          this.form.fileId = this.form.fileList[0].id
          this.form.coverId = this.form.coverFileList[0].fileId
          if (this.action == 'edit') {
            edit(this.form).then((res) => {
              this.$dtModal.msgSuccess(res.message)
              this.$emit('success')
              this.loading = false
              this.dialogVisible = false
            }).catch(() => {
              this.loading = false
            })
          } else if (this.action == 'add') {
            add(this.form).then((res) => {
              this.$dtModal.msgSuccess(res.message)
              this.$emit('success')
              this.loading = false
              this.dialogVisible = false
            }).catch(() => {
              this.loading = false
            })
          }
        }
      })
    },
    add() {
      this.dialogVisible = true
      this.modalTitle = '新增视频'
      this.action = 'add'
    },
    edit(row) {
      this.dialogVisible = true
      this.modalTitle = '编辑视频'
      this.action = 'edit'
      this.initData(row.id)
    },
    view(row) {
      this.dialogVisible = true
      this.modalTitle = '详情'
      this.action = 'view'
      this.initData(row.id)
    },
    initModel() {
      this.form = {
        videoName: '',
        // isAutomatic: '1',
        fileList: [],
        coverFileList: [],
        videoSummary: ''
      }
      this.$refs.form.resetFields()
    },
    initData(id) {
      getDetail(id).then((res) => {
        this.form = res.data
        this.form.fileList = [{
          id: this.form.fileId,
          url: `${location.origin}${process.env.VUE_APP_BASE_API}${cloud.file}/sysFileInfo/publicDownload?fileId=${this.form.fileId}`,
          name: this.form.fileName
        }]
        this.form.coverFileList = [{
          fileId: this.form.coverId,
          url: `${location.origin}${process.env.VUE_APP_BASE_API}${cloud.file}/sysFileInfo/public/preview?fileId=${this.form.coverId}`
        }]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.red-size {
    color: red;
  }
</style>
